<template>
  <div>
    <van-nav-bar @click-left="onClickLeft" left-text="返回" left-arrow />
    <div class="detail">
      <h3>{{ detail.name }}</h3>
      <img :src="detail.coverImg" width="100%" height="220" alt="" />
      <p>{{ detail.price }}</p>
      <van-button type="primary" block @click="addcart(detail._id)"
        >添加购物车</van-button
      >
    </div>
  </div>
</template>

<script>
import { reqProductsDetail } from "../../api/product";
import { addtocart } from "../../api/cart";
export default {
  data() {
    return {
      detail: {},
    };
  },
  computed: {},
  watch: {},

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async loadDetail(id) {
      const result = await reqProductsDetail(id);
      console.log(result);
      this.detail = result;
    },
    // 添加购物车
    async addcart(id) {
      const result = await addtocart({
        product: id,
        quantity: 1,
      });
      console.log(result);
      this.$router.push("/cart");
    },
  },
  created() {
    const id = this.$route.params.id;
    this.loadDetail(id);
  },
  mounted() {},
  components: {},
};
</script>
<style  scoped>
.van-nav-bar__text {
  color: #131414;
}
</style>
